<template>
  <view class="wrapper">
    <u-popup
      v-model="showPopup"
      mode="bottom"
      border-radius="20"
      :safe-area-inset-bottom="true"
      :closeable="true"
      :mask-custom-style="{ background: 'rgba(0, 0, 0, 0.7)' }"
    >
      <view class="popup-content">
        <view class="page-title">指派拣货员</view>
        <scroll-view class="content-scroll" :scroll-y="true">
          <view class="list">
            <view
              class="item"
              v-for="(item, index) in list"
              :key="index"
              :class="{active: index === selectedIndex}"
              @click="selectItem(item, index)"
            >
              <view class="vital">
                <view class="text-wrap">
                  <view class="name">
                    <text>{{ item.pickerName }}</text>
                    <text class="m-l-10">{{ item.phone }}</text>
                  </view>
                  <view class="desc oneline-hide">
                    <text>前1小时已分配{{ item.hourPickOrderCount }}单</text>
                    <text class="m-l-10">当日已分配{{ item.pickOrderCount }}单</text>
                  </view>
                </view>
                <view class="status">
                  <text class="point" :class="getColorCls(item.status)"></text>
                  <text class="text" :class="getColorCls(item.status)">{{PickerStatusEnum.data.find(key => key.value === item.status)?.name}}</text>
                </view>
              </view>
              <view class="iconfont selected" v-if="index === selectedIndex">&#xe6ad;</view>
            </view>
          </view>
        </scroll-view>
        <view class="footer-fixed">
          <view class="btn-wrapper">
            <u-button :custom-style="customStyle" @click="showPopup = false">取消</u-button>
            <u-button :custom-style="customStyle" type="primary" @click="confirm">确认</u-button>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import PickerStatusEnum from "@/common/enum/setting/pickerStatus"

export default {
  name: "index",
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      PickerStatusEnum,
      showPopup: false,
      selectedIndex: 0,
      customStyle: {
        width: '330rpx'
      },
    }
  },
  computed: {
    getColorCls() {
      return (status) => {
        switch (status) {
          case PickerStatusEnum.REST.value: return 'gray'
          case PickerStatusEnum.LEISURE.value: return 'green'
          case PickerStatusEnum.BUSY.value: return 'blue'
        }
      }
    }
  },
  methods: {
    show() {
      this.showPopup = true
    },
    hide() {
      this.showPopup = false
    },
    selectItem(item, index) {
      this.selectedIndex = index
    },
    confirm() {
      const { status } = this.list[this.selectedIndex]
      if (status === PickerStatusEnum.REST.value || status === PickerStatusEnum.BUSY.value) {
        return this.$confirm(
          () => this.emit(),
          {title: '拣货员休息提示', content: '该拣货员繁忙或已休息，转派后超2分钟未拣货将退回待转派状态，是否确定转派？'}
        )
      }
      this.emit()
    },
    emit() {
      this.$emit('confirm', this.list[this.selectedIndex])
    }
  }
}
</script>

<style scoped lang="scss">
.wrapper {

  .popup-content {
    padding: 24rpx;

    .page-title {
      text-align: center;
      margin-bottom: 40rpx;
      font-size: 36rpx;
      font-weight: bold;
    }

    .content-scroll {
      min-height: 30vh;
      max-height: 55vh;

      .list {
        margin-top: 24rpx;
        // 设置ios刘海屏底部横线安全区域
        padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
        padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);

        .item {
          margin-bottom: 24rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-radius: 16rpx;
          border: 1rpx solid var(--eeeeee, #EEE);
          padding: 24rpx;
          font-size: 26rpx;

          &.active {
            border: 1rpx solid #2D71FD;

            .name {
              font-weight: bold;
            }
          }

          .vital {
            display: flex;
            align-items: center;

            .text-wrap {
              margin-right: 10rpx;
              width: 420rpx;

              .name {
                font-size: 28rpx;
                font-weight: bold;
              }

              .desc {
                font-size: 26rpx;
                color: #666666;
                margin-top: 18rpx;
              }
            }

            .status {
              display: flex;
              align-items: center;

              .point {
                display: inline-block;
                width: 12rpx;
                height: 12rpx;
                border-radius: 50%;
                margin-right: 10rpx;

                &.green {
                  background: #00B42A;
                }

                &.blue {
                  background: #2D71FD;
                }

                &.gray {
                  background: #999999;
                }
              }

              .text {
                margin-left: 8rpx;
                font-size: 24rpx;

                &.green {
                  color: #00B42A;
                }

                &.blue {
                  color: #2D71FD;
                }

                &.gray {
                  color: #999999;
                }
              }
            }
          }

          .selected {
            color: #2D71FD;
            font-size: 40rpx;
          }
        }
      }
    }
  }

  // 底部操作栏
  .footer-fixed {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    right: 0;
    z-index: 11;
    background: #fff;
    border-top: 2rpx solid #eee;
    // 设置ios刘海屏底部横线安全区域
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .btn-wrapper {
      padding: 16rpx 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>
